<template>
  <div class="header-lay" :style="styles">
    <el-avatar :src="logo" shape="square" :size="32" :fit="'fill'"
               class="header-logo" />
    <div class="page-title"> {{ title }} </div>
    <div style="height: 48px;">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          style="flex:1; border: none; height: 32px;margin: 8px 4px 8px;"
          background-color="#252A2F"
          text-color="#C7C8CA"
          active-text-color="#FFFFFF"
          @select="handleSelect">
        <template v-for="(item) in menus" :key="item.path">
          <el-menu-item style="margin-right: 20px;" :index="item.path">
            <el-icon :size="16">
              <component :is="item.meta.icon"></component>
            </el-icon>
            <template #title>
              <span>
                {{ item.meta.title }}
              </span>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="flex-lay" />
    <div class="right-lay">
      <el-avatar :icon="user?.headIcon"
                 :src="user?.headUrl"
                 :size="32"
                 style="margin-right: 16px;" />
      <div class="userName">
        {{ user?.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {computed, ref} from "vue";
import router from "@/router";

interface Props {
  logo: string,
  title?: string,
  headHei: number,
  menus?: MenuType[],
  user?: UserType
}

const props = defineProps<Props>();

const activeIndex = ref('0');
const handleSelect = (key: string, keyPath: string[]) => {
  if (!router.currentRoute.value.path.startsWith(key)) {
    router.push({
      path: key
    })
  }
}

const styles = computed(() => {
  return {
    "color": "white",
    "font-size": "14px",
    "height": props.headHei + 'px',
  };
});

</script>

<style scoped>
.el-menu--horizontal > .el-menu-item {
  border-bottom: none;
  text-decoration: none;
  padding: 0 8px;
  margin-right: 20px;
  background-color: rgba(0, 0, 0, 0) !important;

  opacity: .8;
  color: #efeff1;
  font-size: 13px;
  will-change: opacity,background-color;
  -webkit-transition: opacity .3s,background-color .3s;
  transition: opacity .3s,background-color .3s;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-radius: 4px;
  padding: 0 8px;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  background-color: #333844 !important;
}

.el-menu--horizontal > .el-menu-item:hover {
  border-radius: 4px;
  padding: 0 8px;
  border-bottom: none;
  text-decoration: none;
  opacity: 1;
  background-color: #333844 !important;
}

.header-lay {
  display: flex;
  flex-direction: row;
  background: #252A2F;
  align-items: center;
  height: auto;
  padding: 0 16px 0;
  font-size: 13px;
  box-shadow: 0 1px 2px 0 rgba(26,24,29,.24);
}

.header-logo {
  text-align: left;
  margin-right: 16px;
}

.page-title {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #efeff1;
  margin-right: 16px;
}

.span-menu-item {
  opacity: .8;
  color: #efeff1;
  font-size: 13px;
  will-change: opacity,background-color;
  -webkit-transition: opacity .3s,background-color .3s;
  transition: opacity .3s,background-color .3s;
}

.flex-lay {
  flex: 1;
}

.right-lay {
  display: flex;
  flex-direction: row;
  margin-right: 4px;
  align-items: center;
}

.userName {
  font-weight: bold;
}

</style>
